<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="6">
        <!--        第一个-->
        <card title="总销售额" count="￥1952">
          <template slot="echarts">
            <div>
              <span>周同比 56.67%<el-icon class="el-icon-top" style="color: greenyellow;margin-right: 3px" /></span>
              <span>日同比 19.67%<el-icon class="el-icon-bottom" style="color: red" /></span>
            </div>
          </template>
          <template slot="test">
            <div style="margin-top: 30px">
              <div style="border-top: 1px solid #eee;padding: 15px">日销售额 ￥1234</div>
            </div>
          </template>
        </card>
      </el-col>
      <el-col :span="6">
        <!--        第二个-->
        <card title="访问量" count="1233">
          <template slot="echarts">
            <LineCharts />
          </template>
          <template slot="test" abc="SDSS">
            <div>
              <div style="border-top: 1px solid #eee;padding: 15px">日访问量 234</div>
            </div>
          </template>
        </card>
      </el-col>
      <el-col :span="6">
        <!--        第三个-->
        <card title="支付笔数" count="12360">
          <template slot="echarts">
            <BarCharts />
          </template>
          <template slot="test">
            <div>
              <div style="border-top: 1px solid #eee;padding: 15px">转换率 64%</div>
            </div>
          </template>
        </card>

      </el-col>
      <el-col :span="6">
        <card title="运营活动效果" count="78%">
          <template slot="echarts">
            <LineBar />
          </template>
          <template slot="test">
            <div style=" display: flex;border-top: 1px solid #eee;padding-top: 10px">
              <span>周同比 56.67%<el-icon class="el-icon-top" style="color: greenyellow;margin-right: 3px" /></span>
              <span style="display: inline-block">日同比 19.67%<el-icon class="el-icon-bottom" style="color: red" /></span>
            </div>
          </template>
        </card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Card from '@/views/dashboard/header/card/index'
import LineCharts from '@/views/dashboard/header/lineCharts/index'
import BarCharts from '@/views/dashboard/header/barcharts/index'
import LineBar from '@/views/dashboard/header/LineBar/index'
export default {
  name: 'Header',
  components: {
    Card,
    LineCharts,
    BarCharts,
    LineBar

  },
  mounted() {
    console.log('this......', this.$slots)
  }
}
</script>

<style scoped>

</style>
